<template>
	<view class="w-full">
		<use-navbar ref="navbar" type="custom" :show="true" :back="false" :bg-color="navbarBgcolor">
			<template v-slot:left>
				<view class="tac">
					<text class="ft-white"></text>
				</view>
			</template>
			<template v-slot:title>
				<view class="tac">
					<text class="ft-white"></text>
				</view>
			</template>
			<template v-slot:right>
				<!-- #ifdef APP-PLUS || H5 -->
				<view class="tar" @click="to('/sub-user/pages/setting/setting')">
					<uni-icons type="gear" size="26" color="#fff" />
				</view>
				<!-- #endif -->
			</template>
		</use-navbar>
		<view class="navbar-bg pos-a w-full" :style="{top:navbarHeight+'px'}" style="z-index: 5;">
			<view style="">
				<image src="@/static/images/bg-main.jpg" mode="widthFix" class="w-full">
				</image>
			</view>
		</view>
		<view style="height: 10rpx;"></view>
		<view class="header-area wpre-95 pos-r " ref='headerArea' :style="{ 'padding-top': `${paddingTop}px` }"
			style="height: 20.5vh;margin: 0 auto;">
			<view class="pos-a w-full" style="margin: 0 auto;left: 0;bottom: 27.5px;">
				<view class="pos-a w-full" style="z-index: 5;left: 0;top:0">
					<image src="@/static/images/mine_bg.png" mode="widthFix" class="w-full">
					</image>
				</view>
				<!-- #ifdef MP-WEIXIN-->
				<view style="height: 15px;"></view>
				<!-- #endif -->
				<view class="member-area padding-top-sm margin-bottom dflex pos-r  w-full padding-lr-sm"
					style="align-items: flex-start;">
					<view class="headimg border-radius-c" @click="to('/sub-user/pages/setting/personal')">
						<image class="avatar border-radius-c"
							:src="memberInfo.member_headimg || 'https://anmakeover.cn/resources/app-plus/user-default.png'">
						</image>
					</view>
					<view class="dflex-b" style="flex-grow: 1;align-items: flex-start;">
						<view class="margin-left-sm">
							<view class="info-box margin-lr-sm dflex-sc">
								<view v-if="islogin" class="dflex-c" @click="to('/sub-user/pages/setting/personal')">
									<text class="fs-lg line-height-1 ft-white fwb">
										{{ memberInfo.member_nickname || memberInfo.member_name||'匿名用户' }}
									</text>
									<view class=" padding-lr-xs margin-left-sm arrow-right">
										<uni-icons type="right" color="#fff"></uni-icons>
									</view>
								</view>
								<view class="dflex" v-else @click="to('')">
									<text class="fs-lg ft-white fs-28">登录/注册</text>
									<view class=" padding-lr-xs margin-left-sm arrow-right" style="">
										<uni-icons type="right" color="#fff"></uni-icons>
									</view>
								</view>
								<!-- 微信小程序最新版已不再返回 昵称、头像 -->
								<view v-if="islogin " class="margin-lr" @click.stop="updateMember">
									<view :class="{ 'rotate': isreq }" class="animated "
										style="width: 25px;height: 25px;line-height: 25px;">
										<uni-icons type="refreshempty" color="#fff" size="22" />
									</view>
								</view>
							</view>
							<template v-if="islogin">
								<view class="dflex padding-tb-xs wpre-85" style="flex-grow: 1;flex-wrap: wrap;">
									<view class="dflex padding-tb-xxs" style="flex-wrap: wrap;">
										<text
											class="fs-gray fs-label margin-lr-xs fs-xxs ">ID:{{memberInfo.user_code}}</text>
									</view>
								</view>
								<view>
									<text class="fs-xxs">{{ memberInfo.member_city }}</text>
								</view>
							</template>
						</view>
						<view class="padding-lr-sm dflex-e " style="flex-flow: column;align-items: center;">
							<!-- #ifdef MP-WEIXIN -->
							<view class="tar" @click="to('/sub-user/pages/setting/setting')">
								<uni-icons type="gear" size="26" color="#fff" />
							</view>
							<!-- #endif -->
						</view>
					</view>
				</view>

				<view class="tac ft-white pos-r" style="z-index: 8;">
					<!-- <text>每一份科技都被看见，每一个理想都被满足！</text> -->
					<view class="tac ft-white padding-top-xs">
						<text class="fs-30" style="color: #d1d1d1;">{{Family||'加入企业'}}</text>
						<template v-if="showOperatebar">
							<view>
								<text class="fs-23 padding-lr-xxs" style="color: #d1d1d1;">为您服务</text>
							</view>
						</template>
						<!-- <text class="fs-20 padding-lr-xxs" style="color: #ccc;">[更换]</text> -->
					</view>
				</view>
			</view>

		</view>

		<view style="height:20rpx;"></view>
		<view class="padding-sm">
			<view class="border-radius bg-main pos-r">
				<view class="vip-card-area pos-r padding-lr-sm use-hover" @click="tovip">
					<view class="dflex-b">
						<view class="dflex">
							<text class="iconfont  ft-base line-height-1 "></text>
							<view class="animated uscroll">
								<text v-if="member.vip" class="margin-left-xs">聚管事</text>
								<text v-else class="margin-left-xs">聚管事</text>
							</view>
						</view>
						<view class="dflex-ec">
							<view @click="to('/sub-user/pages/integral/sign')"
								class="dflex-c border-radius-big bg-base padding-lr-sm margin-right-sm"
								style="min-height: 32px;display: none;">
								<uni-icons type="flag" color="#fff" size="18"
									style="width: 25px;height: 25px;line-height: 25px;" />
								<view style="min-width: 32px;" class="tac fs-20">{{ signed ? '已签到' : '签到' }}</view>
							</view>
							<view class="dflex" @click="to('/sub-user/pages/setting/personal')"
								style="min-height: 32px;display: none;">
								<text v-if="!member.vip" style="color: #b65b5d;border: 1px solid #b65b5d;"
									class="fs-xs border-radius-lg padding-tb-xxs padding-lr-sm">会员中心</text>
								<text v-else style="color: #b65b5d;border: 1px solid #b65b5d;"
									class="fs-xs border-radius-lg padding-tb-xxs padding-lr-sm">立即开通</text>
							</view>
						</view>
					</view>
				</view>
				<view class="stats-area dflex-s bg-main" style="min-height: 10vh;">
					<template v-if="showOperatebar">
						<view class="item dflex dflex-flow-c" @click="to('/sub-user/pages/work/index')"
							style="width: 33%;max-width:33%;">
							<!-- <uni-icons type="cart-filled" size="30" style="color: #78c6bb;" /> -->
							<text class="iconfont icon-renwu2 fs-45" style="color: #c6bfc6;"></text>
							<text class="ft-dark-3 padding-tb-xs">我的任务</text>
						</view>
						<view class="vertical-line"></view>
						<view class="item dflex dflex-flow-c" @click="to('/sub-user/pages/statistics/project')"
							style="">
							<!-- <uni-icons type="email-filled" size="30" style="color: #78c6bb;" /> -->
							<text class="iconfont icon-project-o fs-45" style="color: #7e7e7e;"></text>
							<text class="ft-dark-3 padding-tb-xs">项目统计</text>
						</view>
						<view class="vertical-line"></view>
						<view class="item dflex dflex-flow-c" @click="to('/sub-user/pages/statistics/workorder')"
							style="width: 33%;max-width: 33%;">
							<!-- <uni-icons type="flag" size="30" style="color: #78c6bb;" /> -->
							<text class="iconfont icon-zu1778 fs-45" style="color: #c6c6c6;"></text>
							<text class="ft-dark-3 padding-tb-xs">工单统计</text>
						</view>
					</template>
				</view>
			</view>

			<view class="border-radius margin-top-sm bg-main">
				<view class="padding-lr-sm padding-top-sm">
					<text class="ft-dark-3">常用功能</text>
				</view>
				<view class="stats-area dflex-s bg-main" style="flex-wrap: wrap;">
					<view class="item dflex dflex-flow-c" v-for="(item,idx) in navigateList" @click="to(item.url)"
						style="width: 25%;max-width: 25%;min-width: 25%;">
						<text class="iconfont  fs-50" :class="item.icon" :style="{'color':item. color}"></text>
						<text class="ft-dark-3">{{item.text}}</text>
					</view>
					<view class="item dflex dflex-flow-c" v-for="(item,idx) in testMenuList"
						@click="onClick(item,item.type)" style="width: 25%;max-width: 25%;min-width: 25%;">
						<text class="iconfont  fs-50 icon-zu1778" style="color: #1f5978;"></text>
						<text class="ft-dark-3">{{item.text}}</text>
					</view>
				</view>

			</view>
			<template v-if="showTestList">
				<view v-if="showh5Weixin" class="border-radius margin-top-sm bg-main">
					<!-- 未关注公众号的情况下显示 -->
					<use-list-title title="关注公众号" iconfont="iconweixin" color="#58bc8a" fwt="600" tip="关注领积分"
						@goto="to('/sub-user/pages/setting/setting')"></use-list-title>
				</view>
			</template>
		</view>

		<view class="uni-divider" style="min-height: 5vh;"></view>
		<use-copyright></use-copyright>
		<use-tabbar></use-tabbar>
	</view>
</template>
<script setup>
	// --选项式 API
	import {
		ref,
		reactive,
		onMounted,
		computed,
		watch,
		getCurrentInstance
	} from 'vue'

	import {
		storeToRefs
	} from 'pinia';
	import {
		useUserStore
	} from '@/store'
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app";
	const {
		ctx,
		proxy
	} = getCurrentInstance();
	console.log("ctx", ctx);
	const title = ref("标题")
	let UserStore = useUserStore()
	console.log(UserStore.member)
	const navbarHeight = ref(0)
	const statusHeight = ref('0')
	const navbarBgcolor = ref('')
	const memberInfo = ref({})
	const member = ref({})
	const islogin = ref(false)
	const isreq = ref(false)
	const signed = ref(false)

	const Family = ref('')
	const paddingTop = ref('0')
	const navigateList = ref([])
	const testMenuList = ref([])
	onLoad((option) => {
		getApp().globalData.tabbarIndex = 3;
		navigateList.value = [{
			text: '成员管理',
			url: '/sub-user/pages/member/list',
			icon: 'icon-zu1778',
			color: '#2a95c6'
		}]
		testMenuList.value = [{
			text: 'webview',
			url: 'https://youerp.cn',
			icon: 'icon-zu1778',type:'web',
			color: '#2a95c6'
		},
		{
			text: '网页游戏',
			url: '/pages/test/pixi',
			icon: 'icon-zu1778',type:'local',
			color: '#2a95c6'
		}]
	});
	onShow(async () => {
		memberInfo.value = UserStore.member;
		islogin.value = UserStore.islogin;
		getMemberData();
	});
	// 统一跳转接口，拦截未登录路由
	const to = (url, bool) => {
		console.log(url)
		if (!url) {
			proxy.$utils.msg("该功能暂未开通");
			return;
		}
		// if (!UserStore.member.islogin) {
		// 	proxy.$utils.tologin()
		// 	return;
		// }
		if (bool) {
			if (!UserStore.member.isTesters) {
				proxy.$utils.msg("该功能暂对测试人员开通");
				return;
			}
		}
		console.log(url)
		uni.navigateTo({
			url
		});
	}
	const onClick = (e,type) => {
		console.log('执行click事件', e)
		if(type=='local'){
			uni.navigateTo({
				url:e.url
			});
			return;
		}
		
		let url = `/pages/content/web?title=${e.title}&url=${e.url}`
		uni.navigateTo({
			url
		});
	}
	const toPage = (res) => {
		console.log(res)
		let url = '/pages/content/web?url=' + res
		uni.navigateTo({
			url
		});
	}
	const tovip = () => {

	}
	const updateMember = () => {}
	const getMemberData = () => {
		let url = proxy.$config.baseUrl;
		let params = {
			loading: false,
			url: '/webapi/eidData.ashx?oper=LTTG_Multifunction',
			method: 'get',
			data: {
				storedPro: 'P_SaaS_GetSiteUserInfo',
				paraNum: 3,
				resultSetNum: 1,
				para1: UserStore.member.member_weixin,
				para2: '',
				para3: ''
			}
		}

		proxy.$api.getData(url, params).then((res) => {
			console.log(res);
			try {
				if (res.status == '1') {
					let _userInfo = {
						member: {
							appid: proxy.$config.wxMpKey,
							member_id: res.data1[0].user_id,
							member_headimg: res.data1[0].userphoto,
							member_name: res.data1[0].user_name,
							member_nickname: res.data1[0].user_name,
							member_weixin: UserStore.member.member_weixin,
							member_openid: UserStore.member.member_openid,
							member_rid: res.data1[0].rid,
							member_access_token: '',
							member_mobile: '',
							msgnum: res.data1[0].asknum,
							user_code: res.data1[0].code,
							ORG: '',
							ORGID: '',
							state: '',
							is_plus: ''
						},
						user: {
							uid: '',
							token: "",
							tokenExpired: "",
							userInfo: {
								mobile: '',
								role: ['member'],
								username: '',
								user_id: ''
							}
						}
					};
					console.log(memberInfo.value)
					memberInfo.value = _userInfo.member;
					UserStore.login(_userInfo);
				} else {

				}
			} catch (e) {
				console.log(e)
			}
		})

	}

	const baseUrl = computed(() => {
		return proxy.$config.baseUrl
	})
	const showOperatebar = computed(() => {
		if (!UserStore.member.member_rid) {
			return false;
		}
		return UserStore.member.member_rid !== '999' ? true : false;
	})
	const showTestList = computed(() => {
		return true;
	})
	const showNavbar = computed(() => {
		return true;
		return UserStore.systemInfo.terminal == 'windows' ? false : true;
	})
	const showh5Weixin = computed(() => {
		return false;
		if (this.member && this.member.member_weixin && this.member.member_weixin.h5) return false;
		return true;
	})
	onMounted((options) => {
		uni.setNavigationBarTitle({
			title: '个人中心'
		});
	})
</script>
<style lang="scss">
	page,
	page-container {
		min-height: 100vh;
		background: #F2F6F9;
	}

	.arrow-right {
		width: 20.5px;
		height: 20.5px;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;

		.icon {
			line-height: 15px;
			vertical-align: middle;
		}
	}

	.navbar-bg {
		height: 235px;
		right: 0;
		top: 0;
		width: 100%;
		text-align: right;

		image {
			margin-left: auto;
			min-height: 0;
			opacity: 0.98;
		}
	}

	.header-area {}

	.icon-lg {
		font-size: 1.5rem;
	}

	.member-area {
		.headimg {
			width: 100rpx;
			height: 100rpx;
			border: 5rpx solid #fff;
		}
	}

	.vip-card-area {
		padding-top: 12rpx;
		padding-bottom: 12rpx;
		font-size: 24rpx;
		color: #c6b181;
		background-color: #000000;
		/* 不支持线性的时候显示 */
		background-image: linear-gradient(to right, #3a3a3a, #000000);

		.iconfont {
			font-size: 66rpx;
		}
	}

	.stats-area {
		.item {
			padding: 20rpx 0 25rpx 0;
		}

		.num {
			font-size: 14px;
			color: #3a3a3a;
			margin-bottom: 6rpx;
		}
	}

	.order-area {
		.item {}

		.iconfont {
			position: relative;
			font-size: 32upx;

			.badge {
				right: initial;
			}
		}
	}

	.stats-area .item,
	.order-area .item {
		position: relative;
		font-size: 14px;
		color: #3a3a3a;
		flex: 1;
	}

	.browsing-area {
		image {
			width: 160rpx;
			height: 160rpx;
		}
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}

	.log-out-btn {
		color: #000;
	}
</style>